<template>
  <div class="login">
    <div class="login-card">
      <div class="login-card-left"></div>
      <div class="login-card-right">
        <div class="login-form">
          <div class="login-form-tile">欢迎登录</div>
          <div class="login-form-item">
            <el-input :disabled="loading" prefix-icon="el-icon-star-on" class="login-form-input" placeholder="请输入用户名" v-model="loginInfo.username" clearable autofocus></el-input>
          </div>
          <div class="login-form-item">
            <el-input :disabled="loading" prefix-icon="el-icon-star-on" class="login-form-input" placeholder="请输入密码" v-model="loginInfo.password" clearable ></el-input>
          </div>
					<div class="login-form-item" style="heihgt:40px;line-height:40px;">
						<el-checkbox :disabled="loading" v-model="loginInfo.isRemember">记住密码</el-checkbox>
          </div>
          <div class="login-form-item">
            <el-button @click="loginHandler" :loading="loading" class="login-form-btn" type="primary">登录</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { login } from "@/api/system/user";
var _this
export default {
  data() {
    return {
      loginInfo:{
        username:'admin',
        password:'1q2w3E*',
        isRemember:true
      },
      loading:false
    };
  },
  created(){
    _this = this
  },
  mounted() {
    document.querySelectorAll('.el-input__inner').forEach(e=>
    {
      _this.$y._.assign(e.style,{
        border:'none',
        borderBottom:'1px solid #ccc',
        borderRadius : '0'
      })
    })
  },
  methods:{
    async loginHandler(){
      this.loading = true
      var res = await this.$store.dispatch('user/login', this.loginInfo)
      this.loading = false
      this.$router.push('/')
    }
  }
};
</script>

<style lang="scss" scoped>
.login {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #d6e9ff;
  .login-card {
    background-color: #ffffff;
    border-radius: 10px;
    width: 1000px;
    height: 600px;
    overflow: hidden;
    display: flex;
    > div {
      width: 50%;
      height: 100%;
    }
    .login-card-left {
      background-image: url('../../assets/login-background-image.png');
    }
    .login-card-right {
      display: flex;
      justify-content: center;
      align-items: center;
			.login-form{
				height: 60%;
				width: 60%;
				.login-form-tile {
        font-size: 1.6em;
        height: 100px;
        line-height: 100px;
        text-align: center;
        font-weight: 600;
      }
      .login-form-item {
				.login-form-input{
				}
				.login-form-btn{
					width: 100%;
				}
      }
			}
    }
  }
}
.el-input__inner {
  border: none;
  border-bottom: 1px solid #ccc;
}
</style>